<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>vue实现全选反选</title>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="table">
        <table style="width: 400px;">
            <thead>
                <tr style="height: 30px;background-color: coral">
                    <th>
                        <input type="checkbox" v-model="computedSelectAll">全选</th>
                    <th>歌单</th>
                    <th>歌手</th>
                    <th>专辑</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in info">
                    <td>
                        <input type="checkbox" v-model="item.checked">
                    </td>
                    <td>{{item.list}}</td>
                    <td>{{item.singer}}</td>
                    <td>{{item.songs}}</td>
                </tr>
            </tbody>
        </table>
        <div class="num" style="width: 400px;height: 30px;background-color: coral">统计 选中的歌手有：{{singerSelected}}</div>
        专辑数：{{songSelected}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var info = [
            { list: "Hell", singer: "Lin", songs: 10, checked: false },
            { list: "Join", singer: "Jack", songs: 8, checked: false },
            { list: "Beauty", singer: "Bob", songs: 11, checked: false },
            { list: "This", singer: "Happy fxck", songs: 23, checked: false },];
        var app = new Vue({
            el: "#table",
            data: {
                info: info,
            },
            computed: {
                singerSelected: function () {
                    var singer = 0;
                    this.info.map(function (item) {
                        if (item.checked) {
                            singer++;
                        }
                    })
                    return singer;
                },
                songSelected: function () {
                    var song = 0;
                    this.info.map(function (item) {
                        if (item.checked) {
                            song += item.songs;
                        }
                    })
                    return song;
                },
                computedSelectAll: {
                    get: function () {
                        for (var item of this.info) {
                            if (!item.checked) {
                                return false;
                            }
                        }
                        return true;
                    },
                    set: function (value) {
                        if (value) {
                            for (var item of this.info) {
                                item.checked = true;
                            }
                        } else {
                            for (var item of this.info) {
                                item.checked = false;
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>